/* eslint-disable react-native/no-inline-styles */
import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  ScrollView,
  FlatList,
  TouchableOpacity,
  DatePickerAndroid,
  TextInput,
  ActivityIndicator
} from 'react-native';
import styled from 'styled-components';
import { Actions } from 'react-native-router-flux';
import { getToken } from '../../../utils/auth';
import { applyTalkHistoryList } from '../../../api/index';
import LinearGradient from 'react-native-linear-gradient';
// import { BoxShadow } from 'react-native-shadow';

export default class talkHistory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '谈话记录',
      imgUrl: require('../../../assets/work/sportsRankings/backtrack.png'),
      search: '',
      isRefreshing: false,
      isLoading: true,
      historyLists: [],
      footType: 0,
      params: {
        pageSize: 1,
        pageNum: 5,
        deptId: '0',
        petCreateTime: '',
        pageTotal: 0
      }
    };
  }
  async openDatePick() {
    try {
      const { action, year, month, day } = await DatePickerAndroid.open({
        date: new Date()
      });
      if (action !== DatePickerAndroid.dismissedAction) {
        this.setState({
          params: {
            petCreateTime: year + '/' + month + '/' + day
          }
        });
      }
    } catch ({ code, message }) {
      console.error('Cannot open date-picker', message);
    }
  }
  //加载等待页
  renderLoadingView() {
    return (
      <View style={styles.container}>
        <ActivityIndicator animating={true} color="#5593FF" size="large" />
      </View>
    );
  }
  //加载失败view
  renderErrorView() {
    return (
      <View style={styles.container}>
        <Text>加载失败</Text>
      </View>
    );
  }
  //返回itemView
  _renderItemView = ({ item }) => {
    return (
      <View
        style={{
          width: '100%',
          height: 220,
          borderRadius: 10,
          marginBottom: 20,
          backgroundColor: '#ccc',
          flexDirection: 'row'
        }}>
        <LinearGradient
          style={{
            borderTopLeftRadius: 10,
            borderBottomLeftRadius: 10
          }}
          colors={['#7666FE', '#51B6FC']}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}>
          <View style={{ width: 100, height: '100%' }}>
            <ListText>罪犯姓名：</ListText>
            <ListText>罪犯编号：</ListText>
            <ListText>谈话民警：</ListText>
            <ListText>所属部门：</ListText>
            <ListText>谈话类型：</ListText>
            <ListText>谈话时间：</ListText>
            <ListText>谈话时长：</ListText>
            <ListText>录音评估：</ListText>
            <ListText>情绪评估：</ListText>
            <ListText>情绪评估：</ListText>
            <ListText>危险评估：</ListText>
          </View>
        </LinearGradient>
        <View
          style={{
            width: '100%',
            height: '100%',
            backgroundColor: '#fff',
            paddingLeft: 20
          }}>
          <ListValText>罪犯姓名：</ListValText>
          <ListValText>罪犯编号：</ListValText>
          <ListValText>谈话民警：</ListValText>
          <ListValText>所属部门：</ListValText>
          <ListValText>谈话类型：</ListValText>
          <ListValText>谈话时间：</ListValText>
          <ListValText>谈话时长：</ListValText>
          <ListValText>录音评估：</ListValText>
          <ListValText style={{ color: '#FF4300' }}>情绪评估：</ListValText>
          <ListValText style={{ color: '#FF4300' }}>情绪评估：</ListValText>
          <ListValText style={{ color: '#5593FF' }}>危险评估：</ListValText>
        </View>
      </View>
    );
  };
  _onRefresh = () => {
    this.setState({ refreshing: true });
    getToken().then(token => {
      this.fetchData(this.state.params, token, 1);
    });
  };
  fetchData(pararms, token) {
    applyTalkHistoryList(
      token,
      pararms.pageNum,
      pararms.pageSize,
      pararms.deptId,
      pararms.petCreateTime
    )
      .then(res => {
        console.log(JSON.stringify(res, null, 4));
        if (res.code === 0) {
          const _PAGES = Math.ceil(res.data.total / this.state.params.pageSize);
          this.setState({
            historyLists: res.data.rows,
            footType: this.state.params.pageNum >= _PAGES ? 1 : 0
          });
        }
      })
      .catch(error => {
        console.log(error);
      })
      .done();
  }
  renderData() {
    return (
      <FlatList
        data={this.state.historyLists}
        renderItem={this._renderItemView}
        ListFooterComponent={this._renderFooter.bind(this)}
        onEndReached={this._onEndReached.bind(this)}
        onEndReachedThreshold={1}
        refreshing={this.state.isRefreshing}
        onRefresh={this._onRefresh}
      />
    );
  }
  _renderFooter() {
    // return (
    //   <View
    //     style={{
    //       height: 30,
    //       alignItems: 'center',
    //       justifyContent: 'flex-start'
    //     }}>
    //     <Text
    //       style={{
    //         color: '#999999',
    //         fontSize: 14,
    //         marginTop: 5,
    //         marginBottom: 5
    //       }}>
    //       没有更多数据了
    //     </Text>
    //   </View>
    // );
    if (this.state.footType === 1) {
      return (
        <View
          style={{
            height: 30,
            alignItems: 'center',
            justifyContent: 'flex-start'
          }}>
          <Text
            style={{
              color: '#999999',
              fontSize: 14,
              marginTop: 5,
              marginBottom: 5
            }}>
            没有更多数据了
          </Text>
        </View>
      );
    } else if (this.state.footType === 2) {
      return (
        <View style={styles.footer}>
          <ActivityIndicator />
          <Text>正在加载更多数据...</Text>
        </View>
      );
    } else if (this.state.footType === 0) {
      return (
        <View style={styles.footer}>
          <Text />
        </View>
      );
    }
  }
  _onEndReached() {
    //如果是正在加载中或没有更多数据了，则返回
    if (this.state.footType != 0) {
      return;
    }
    //如果当前页大于或等于总页数，那就是到最后一页了，返回
    if (
      this.state.params.pageNum !== 1 &&
      this.state.params.pageNum >= this.state.pageTotal
    ) {
      return;
    } else {
      this.state.params.pageNum++;
    }
    //底部显示正在加载更多数据
    this.setState({ footType: 2 });
    //获取数据
    getToken().then(token => {
      this.fetchData(this.state.params, token);
    });
  }
  componentWillMount() {
    getToken().then(token => {
      this.fetchData(this.state.params, token);
    });
  }
  render() {
    // const shadowOpt = {
    //   width: 100,
    //   height: 100,
    //   color: '#000',
    //   border: 10,
    //   radius: 50,
    //   opacity: 0.2,
    //   x: 0,
    //   y: 8,
    //   style: { marginVertical: 5 }
    // };
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.header}>
          <TouchableOpacity onPress={() => Actions.pop()}>
            <View>
              <Image
                source={this.state.imgUrl}
                style={{ width: 25.67, height: 22.33, marginBottom: 5 }}
              />
            </View>
          </TouchableOpacity>
          <View
            style={{
              borderBottomColor: '#EDEDED',
              borderBottomWidth: 1,
              borderBottomStyle: 'dashed',
              flexDirection: 'row',
              justifyContent: 'space-between'
            }}>
            <Text style={{ fontSize: 30, fontWeight: 'bold' }}>
              {this.state.title}
              {this.state.params.petCreateTime}
            </Text>
            <TouchableOpacity
              onPress={() => {
                console.log('show');
                DatePickerAndroid.open().then(this.openDatePick());
              }}>
              <Image
                source={require('../../../assets/work/eduTotal/darly.png')}
                style={{ width: 16, height: 17.33, marginTop: 15 }}
              />
            </TouchableOpacity>
          </View>
        </View>
        <View
          style={{
            backgroundColor: '#fff',
            paddingLeft: 15,
            paddingRight: 15
          }}>
          <View style={{ flexDirection: 'row', marginBottom: 15 }}>
            <TextInput
              style={{
                width: '70%',
                height: 40,
                padding: 0,
                paddingLeft: 15,
                backgroundColor: '#f6f6f6',
                borderRadius: 2
              }}
              multiline={true}
              inlineImageLeft="search_icon"
              value={this.state.search}
              placeholder="搜索"
              underlineColorAndroid="transparent"
            />
            <CustomLinearGradient
              colors={['#51B6FC', '#7666FE']}
              start={{ x: 0, y: 0 }}
              end={{ x: 1, y: 1 }}>
              <OnTouchableOpacity
                style={{
                  width: 100,
                  height: 40
                }}
                onPress={() => {
                  //   Actions.talkTotal();
                  console.log('12321');
                }}>
                <Text
                  style={{
                    width: 100,
                    color: '#fff',
                    fontSize: 16,
                    textAlign: 'center'
                  }}>
                  搜索
                </Text>
              </OnTouchableOpacity>
            </CustomLinearGradient>
          </View>
          <ScrollView style={{ height: 520 }}>
            {/* <BoxShadow setting={shadowOpt}> */}
            {this.renderData()}
          </ScrollView>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: 98,
    backgroundColor: '#FFFFFF',
    padding: 19.33
  }
});
const OnTouchableOpacity = styled.TouchableOpacity`
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;
const CustomLinearGradient = styled(LinearGradient)`
  margin-left: 14;
  border-radius: 10.67;
`;
const ListText = styled(Text)`
  width: 100%;
  text-align: center;
  color: #fff;
`;
const ListValText = styled(Text)`
  width: 100%;
  text-align: left;
  color: #000;
`;
